<template>
  <a-col :span="span" class="labelRowOrCol">
    <span>日期：</span>
    <a-date-picker @change="onDateChange" v-model="this_value" :allowClear="allowClear" />
    <a-button icon="fa fa-angle-left" class="cellBtn" @click="onLeftClick" />
    <a-button icon="fa fa-angle-right" class="cellBtn" @click="onRightClick" />
  </a-col>
</template>

<script>
import moment from 'moment';
export default {
  name: 'datePanel',
  props: {
    span: {
      type: Number,
      default: 4
    },
    value: {
      type: moment,
      default: moment()
    },
    allowClear: {
      type: Boolean,
      default: true
    }
  },

  watch: {
    value: {
      handler(newVal) {
        if (this.this_value !== newVal) {
          this.this_value = newVal;
        }
      },
      immediate: true
    },

    this_value(newVal) {
      this.$emit('update:value', newVal);
    }
  },

  data() {
    return {
      this_value: moment()
    };
  },
  methods: {
    onDateChange(date, dateStr) {
      this.$emit('change', date, dateStr);
    },
    onLeftClick() {
      this.this_value = moment(this.this_value, 'YYYY-MM-DD').add(-1, 'days');
    },
    onRightClick() {
      this.this_value = moment(this.this_value, 'YYYY-MM-DD').add(1, 'days');
    }
  }
};
</script>

<style lang="less" scoped>
.cellBtn {
  border-radius: 2px;
  margin-left: 4px;
  width: 32px;
}
</style>
